<template>
  <div class="echarts-content">
    <div id="ref_1"></div>
    <div id="ref_2"></div>
    <div id="ref_3"></div>
  </div>
</template>

<script name="EchartsIndex" lang="ts" setup>
import {onMounted, ref} from 'vue'
import * as echarts from "echarts"

const initChart = (ref, options) => {
  let dom = document.getElementById(ref)
  let chart = echarts.init(dom)
  // chart.dispose()
  chart.setOption(options)
}

let options_1 = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
}

let options_2 = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

let options_3 = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

onMounted(() => {
  initChart('ref_1', options_1)
  initChart('ref_2', options_2)
  initChart('ref_3', options_3)
})

</script>

<style lang="less" scoped>
.echarts-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 18px;

  & > div {
    //width: 400px;
    height: 450px;
  }
}
</style>